<template>
    <div class="user">
        <el-button type="primary" @click="userAdd">添加用户</el-button>
        <el-table
                :data="users"
                style="width: 100%">
            <el-table-column
                    label="手机号">
                <template slot-scope="scope">
                    <span>{{ scope.row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.userName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="QQ">
                <template slot-scope="scope">
                    <span>{{ scope.row.qq }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="邮箱">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.email }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="级别">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ levelValue(scope.row.userType) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="密码">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.passWord }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button><br />
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                center>
            <el-form :model="user" ref="user" label-width="100px" class="demo-ruleForm">
                <el-form-item label="手机号" prop="name">
                    <el-input v-model="user.phone" placeholder="登陆使用"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="user.userName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="身份" prop="region">
                    <el-select v-model="user.userType">
                        <el-option v-for="(leve,index) in level" :key="index" :value="index" :label="leve">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="QQ" prop="name">
                    <el-input v-model="user.qq"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="name">
                    <el-input v-model="user.email"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="name">
                    <el-input v-model="user.passWord" show-password></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="formSubmit">确 定</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return {
                users : [],
                user:{
                    userType : 1,

                },
                // level: [
                //     { id : 0 , value : '管理员'},
                //     { id : 1 , value : '学生'},
                //     { id : 2 , value : '老师'},
                //     { id : 3 , value : '校园杂工'},
                // ],
                level: ["管理员","学生","老师","校园杂工"],
                dialogVisible : false,
                isAdd : null,
            }
        },
        created() {
            this.getUser();
        },
        methods: {
            getUser(){
                this.$api.user.getAll().then(res => {
                    this.users = res.data;
                    console.log(this.users);
                })
            },
            levelValue(_level){
                return this.level[_level];
            },
            userAdd(){
                this.isAdd = true;
                this.user = {userType : 1,}
                this.dialogVisible = true;
            },
            handleDelete(id , obj){
                this.$confirm('确定要删除该用户吗?','提示',{
                    confirmButtonText : '确定',
                    cancelButtonText : '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.user.userDelete(obj.id)
                        .then(res => {
                            console.log(res);
                            this.$message.success('删除成功');
                            this.getUser();
                        });
                }).catch(() => {
                    this.$message.success('已取消');
                })
            },
            handleEdit(id , obj){
                this.dialogVisible=true;
                this.user = {...obj};
                this.isAdd = false;
            },
            formSubmit(){
                if (this.isAdd === null) return this.$message.error('错误操作');
                if (this.isAdd){
                    this.$api.user.userAdd(this.user)
                        .then(() => {
                            this.$message.success('添加成功!');
                            this.dialogVisible = false;
                            this.getUser();
                        })
                }else{
                    this.$api.user.userPatch(this.user.id , this.user)
                        .then(() => {
                            this.$message.success('修改成功!');
                            this.dialogVisible = false;
                            this.getUser();
                        })
                }
            }
        }
    }
</script>

<style scoped>

</style>
